آموزش MERN Stack E-Commerce Mobile App with React Native [2023]

سرفصل ها و درس ها

به دوره خوش آمدید Welcome to the course

• قراره چی بسازیم؟ What are we going to build?

• MERN Stack چیست؟ What is MERN Stack?

• چگونه از این دوره بیشترین بهره را ببرید How to Get the Most of This Course

• نحوه استفاده از این دوره How to use this course

• اگر گیر کردید و خطا کردید If you get stuck and Errors

• رئوس مطالب دوره Course Outlines

ابزار و محیط Tools and Environment

• نصب NodeJs Installing NodeJs

• نصب اکسپو Installing Expo

• نصب و اجرای اندروید استودیو Installing and running Android Studio

• نصب و اجرای شبیه ساز iOS Installing and running iOS Simulator

• نصب ویرایشگر کدنویسی ما (IDE) Installing our Coding Editor (IDE)

• نصب PostMan برای تست API ما Installing PostMan to Test our API's

• MongoDB Atlas را پیکربندی کنید Configure MongoDB Atlas

کار با Backend Working with Backend

• معرفی Introduction

• مروری بر RESTful API ما Overview to our RESTful API

• ساختار فایل File Structure

• ایجاد سرور Backend با Express Creating the Backend Server with Express

• متغیرهای محیط خواندن Reading Environment Variables

• ایجاد اولین تماس API و تجزیه داده های Json Create First API Call & Parsing Json Data

• نکته مهم در مورد تجزیه داده های json Important note about parsing json data

• ثبت درخواست های API Logging API Requests

• نصب Mongoose و اتصال به پایگاه داده MongoDB Installing Mongoose and Connect to MongoDB Database

• خواندن/نوشتن داده ها در پایگاه داده با استفاده از API Read/Write Data to Database Using API

• تجزیه و تحلیل پایگاه داده فروشگاه الکترونیکی Analysing the E-Shop Database

• مسیرها و طرحواره های API Backend را ایجاد کنید Create Backend API Routes & Schemas

• فعال کردن CORS و چرا به آن نیاز داریم؟ Enabling CORS & Why Do We Need It?

Backend: محصولات و دسته ها Backend: Products & Categories

• معرفی Introduction

• مدل و طرح محصولات Products Model & Scheme

• دسته بندی مدل و طرح Categories Model & Scheme

• اضافه کردن و حذف دسته ها Add and Delete Categories

• دسته ها و جزئیات دسته را دریافت کنید Get Categories and Category Details

• به روز رسانی دسته Update Category

• یک محصول جدید REST API ارسال کنید Post a New Product REST API

• یک محصول و فهرست محصولات REST API دریافت کنید Get a Product & List of Products REST API

• جمعیت دسته در Get a Product API Population of Category in Get a Product API

• یک محصول REST API را به‌روزرسانی کنید Update a Product REST API

• یک محصول REST API را حذف کنید و شناسه را تأیید کنید Delete a Product REST API and Validate Id

• تعداد محصولات را برای اهداف آماری دریافت کنید Get Products Count for Statistics Purposes

• API REST محصولات ویژه را دریافت کنید Get Featured Products REST API

• فیلتر کردن و دریافت محصولات بر اساس دسته Filtering and Getting Products by Category

• تغییر کلید "_id" به "id" - برای صفحه نمایش دوستانه تر Changing "_id" key to "id" - more frontend friendly

• کد بخش Section Code

Backend: کاربران و احراز هویت Backend : Users & Authentication

• معرفی Introduction

• مدل و طرحواره کاربران Users Model & Schema

• ارسال/ثبت یک کاربر جدید REST API Post/Register a New User REST API

• هش کردن رمز عبور کاربر Hashing the User Password

• دریافت کاربر و فهرست کاربران بدون رمز عبور Get User and List of Users Excluding Password

• وارد API کاربر REST و ایجاد یک توکن شوید Login a User REST API & Creating a Token

• محافظت از API و احراز هویت JWT Middleware Protecting the API and Authentication JWT Middleware

• مدیریت خطای احراز هویت Authentication Error Handling

• مستثنی کردن مسیرهای REST API از احراز هویت Excluding REST API Routes From Authentication

• اطلاعات مخفی کاربر را به Token اضافه کنید Add More Secret User Information to Token

• کاربران و مدیران - نقش کاربر Users & Admins - User Role

• API REST تعداد کاربران را دریافت کنید Get User Count REST API

• کد بخش Section Code

Backend: سفارشات Backend: Orders

• معرفی Introduction

• مدل و طرح سفارشات و سفارشات Orders & Order-Items Model & Scheme

• Array of Refs - مثالی از پیوند سفارش برای سفارش اقلام به محصولات Array of Refs - Example of Link Order to Order Items to Products

• سفارش جدید و ایجاد موارد سفارش در ارسال سفارش جدید New Order & Create Order Items on Posting New Order

• جزئیات سفارش را دریافت کنید و محصولات را در موارد سفارش و داده های کاربر پر کنید Get Order Detail and Populate Products in Order Items and User Data

• به روز رسانی وضعیت سفارش و حذف سفارش Update Order Status & Delete Order

• پس از حذف سفارش، موارد سفارش را حذف کنید Delete Order Items after Deleting the Order

• توضیح راه حل Explaining the Solution

• محاسبه قیمت کل یک سفارش Calculating Total Price of one Order

• کل فروش فروشگاه الکترونیکی را با استفاده از $sum دریافت کنید Get Total E-Shop Sales using $sum

• دریافت سفارشات کاربران Get User Orders

• کد بخش Section Code

پس زمینه: آپلود تصویر و گالری محصول Backend: Product Image & Gallery Upload

• معرفی Introduction

• معرفی Introduction

• پیکربندی آپلود سمت سرور Configure Server Side Upload

• تست آپلود تصویر با پستچی Testing Image Upload with Postman

• اعتبارسنجی انواع فایل های آپلود شده Validating Uploaded File Types

• آپلود تصویر با درخواست پست محصول Image Upload With Product Post Request

• آپلود تصویر با درخواست PUT محصول Image Upload With Product PUT Request

• گالری محصول بارگذاری تصاویر متعدد Product Gallery Multiple Images Upload

• حذف پوشه آپلودها از احراز هویت Excluding Uploads Folder From Authentication

• کد بخش Section Code

React Native Fundamentals: Todo List React Native Fundamentals: Todo List

• React Native Fundamentals React Native Fundamentals

• راه اندازی پروژه و ساختار پوشه Project Setup and Folder Structure

• اجزاء Components

• حالت State

• لوازم جانبی Props

• سبک Style

• ScrollView و TextInput ScrollView and TextInput

• این مورد را اضافه کنید Add Item

• حذف آیتم Delete Item

• منوی نمایشگاه Expo Menu

• کد بخش Section Code

فروشگاه آسان: محصولات Easy Shop: Products

• مقدمه و ساختار پوشه Intro and Folder Structure

• محصولات FlatList FlatList Products

• لیست محصولات Product List

• کارت محصول Product Card

• در مورد چیدمان و تصاویر Regarding Layout and Images

• سرتیتر Header

• نکته مهم در Native Base Important note on Native Base

• پایگاه بومی Native Base

• محصول جستجو شده Searched Product

• فهرست جستجو Search List

• LogBox LogBox

• بنر Banner

• کد بخش Section Code

فروشگاه آسان: دسته بندی ها Easy Shop: Categories

• دسته بندی ها Categories

• فیلتر دسته Category Filter

• نشان های دسته Category Badges

• کانتینر دسته Category Container

• کد بخش Section Code

React Navigation React Navigation

• React Navigation React Navigation

• در حال نصب React Navigation Installing React Navigation

• ناوبری تب پایین Bottom Tab Navigation

• ناوبری با پارامترهای مسیر Navigation with Route Params

• تک محصولی Single Product

• کد بخش Section Code

Redux Redux

• Redux چیست؟ What is Redux?

• نصب Redux Dependencies Installing Redux Dependencies

• فروشگاه Redux Redux Store

• کاهش دهنده اقلام سبد خرید Cart Items Reducer

• اقدامات سبد خرید Cart Actions

• کد بخش Section Code

فروشگاه آسان: سبد خرید Easy Shop: Cart

• ناوبر سبد خرید Cart Navigator

• افزودن اقلام به سبد خرید Add Items To Cart

• تک محصولی Single Product

• کالای سبد خرید Cart Item

• ظرف پایین Bottom Container

• نماد سبد خرید Cart Icon

• پاک کردن سبد خرید Clear Cart

• حذف یک مورد از سبد خرید Remove Single Item from Cart

• کد بخش Section Code

وارسی Checkout

• Checkout Navigator Checkout Navigator

• فرم سفارشی Custom Form

• صفحه حمل و نقل Shipping Page

• صفحه پرداخت Payment Page

• تایید صفحه Confirm Page

• موارد را تأیید کنید Confirm Items

• کد بخش Section Code

در حال اتصال به سرور ما Connecting to our server

• URL پایه Base URL

• نگروک [اختیاری] Ngrok [OPTIONAL]

• داده های برنامه Application Data

• اتصال محصولات Connect Products

• اتصال دسته ها Connect Categories

• useFocusEffect و useCallback useFocusEffect and useCallback

• شاخص فعالیت Activity Indicator

• آماده شدن برای استقرار Preparing for deployment

• استقرار سرور ما در Heroku با GitHub [اختیاری] Deploying our server to Heroku with GitHub [OPTIONAL]

• کد بخش Section Code

فروشگاه آسان: کاربر و احراز هویت Easy Shop: User & Authentication

• ناوبر کاربر User Navigator

• صفحه ورود Login Screen

• رسیدگی به ارسال Handling Submit

• خطا Error

• صفحه ثبت نام Register Screen

• ثبت نام کاربر Register User

• نان تست Toast

• اضافه کردن نان تست به کل برنامه Adding Toast to the entire App

• کد بخش Section Code

Context API Context API

• مقدمه Intro

• نصب Dependencies Installing Dependencies

• اقدامات Actions

• کاهنده Reducer

• خالی است isEmpty

• فروشگاه Store

• اضافه کردن متن به ورود Adding Context to Login

• صفحه نمایه Profile Page

• کد بخش Section Code

Easy Shop: پنل مدیریت [بخش اول] Easy Shop: Admin Panel [Part 1]

• ادمین ناوبر Admin Navigator

• راه اندازی لیست محصولات Product List Setup

• لیست محصولات Product List

• لیست محصولات Product List

• مورد فهرست List Item

• یک ظاهر طراحی آیتم فهرست List Item Styling

• سربرگ لیست List Header

• فیلتر محصول Product Filter

• مدال Modal

• کد بخش Section Code

اجزای سبک Styled Components

• مقدمه Intro

• مقدمه Intro

• دکمه آسان Easy Button

• افزودن دکمه Easy به Modal Adding Easy Button to Modal

• اضافه کردن دکمه Easy به بقیه برنامه Adding Easy Button to rest of the App

• چراغ راهنمایی و رانندگی Traffic Light

• استفاده از چراغ راهنمایی Using Traffic Light

• کد بخش Section Code

فروشگاه آسان: پنل مدیریت [قسمت 2] Easy Shop: Admin Panel [Part 2]

• حذف آیتم Delete Item

• ظرف دکمه ای Button Container

• فرم محصول Product Form

• انتخابگر دسته Category Picker

• کانتینر دکمه دسته بندی ها Categories Button Container

• دسترسی به کتابخانه عکس Access Photo Library

• افزودن محصولات Add Products

• آپلود تصویر Upload Image

• به روز رسانی محصول Update Product

• دسته بندی ها Categories

• دسته بندی ها Categories

• مورد دسته Category Item

• اضافه کردن دسته Add Category

• حذف دسته Delete Category

• کد بخش Section Code

فروشگاه آسان: سفارشات Easy Shop: Orders

• سفارش را تایید کنید Confirm Order

• سفارشات Orders

• کارت سفارش Order Card

• وضعیت سفارش Order Status

• مهم! به روز رسانی در مورد ارسال سفارشات IMPORTANT! Update on sending Orders

• بررسی دکمه سبد خرید Cart Button Check

• وضعیت به روز رسانی Update Status

• سفارشات کاربر User Orders

• حالت ویرایش Edit Mode

• کد بخش Section Code

• کد بخش Section Code

در حال اتمام Finishing Up

• آیکون و صفحه نمایش اسپلش Icon and Splash Screen

• اندروید بسازید Build Android

• در گوگل پلی استور مستقر شوید Deploy to Google PlayStore

• iOS را بسازید Build iOS

• به اپل اپ استور مستقر شوید Deploy to Apple App Store

• لینک های مفید Useful Links

• نتیجه Conclusion

بخش پاداش Bonus Section

• سخنرانی پاداش Bonus Lecture